今天預計使用 webpack 將 TodoList 打包

如果要安裝流程可參照昨天Day 13 - Webpack [part1][簡介與 Babel]

那就來開始吧

設定 Webpack

新增一個 webpack.js 的檔案

touch webpack.js

打開 webpack.js 照著官網上把 entry & output 加上去

在此之前先將之前寫的檔案搬到 src 下面

mkdir src
cp www/index.html src
cp www/main.js src
cp www/TodoController.js src
cp www/TodoItem.js src

設定 webpack

module.exports = {
  entry: [
    './src/main.js' //  將 main.js 指定為入口網站
  ],
  output: {
    path: path.resolve(process.cwd(), 'build') // 將產出放在 build 上
  }
}

使用 loader 將 js 打包起來

module.exports = {
  entry: [
    './src/main.js' //  將 main.js 指定為入口網站
  ],
  output: {
    path: path.resolve(process.cwd(), 'build') // 將產出放在 build 上
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
    }],
  }
}

webpack 4 之後使用 module.rules 在之前是使用 module.loaders

感覺已經設定完了！

設定 script

打開 package.json 加上這個 script

"scripts": {
  "build": "webpack --mode development --config ./webpack.js --progress",
},

試著跑跑看

npm run build

結果出了一堆錯誤，檢查一遍 main.js 原來裡面還有 YUI 的 code ，將它移除之後，使用 import + export keyword 讓模組匯出和匯入

修改 TodoList 上的 ESModule

因為之前都還是使用 YUI 今天來正式改為 ES6 的 module 語法

改法很簡單

定義
TodoItem.js

function TodoItem(content, check) {
  this.content = content;
  this.check = Boolean(check);
  this.time = new Date();
};

TodoItem.prototype.getTime = function () {
  return this.time.toDateString();
};

TodoItem.prototype.toggle = function () {
  return this.check = !this.check;
};

export default TodoItem;

引用
TodoController.js

import TodoItem from './TodoItem'
function TodoController({ view, data, bindId }) {
  this.data = data;

詳細請參照完整代碼

改完之後再跑跑看一次，成功打包完成，會發現多了一個 build/main.js 檔案

如何使用 build/main.js

在 index.html 中加入

<script src="/main.js">

太麻煩了吧！！！！

自動插入產出的 main.js

安裝以下

npm install --save-dev html-loader html-webpack-plugin

在 webpack.js 中新增

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: [
    './src/main.js'
  ],
  output: {
    path: path.resolve(process.cwd(), 'build')
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
    }, {
      test: /\.html$/,
      loader: 'html-loader',
    }],
  },
  plugins: [ // 設定自動插入 main.js
    new HtmlWebpackPlugin({
      inject: true,
      template: `./src/index.html`,
    })
  ],
};

再跑跑看

npm run build

成功產出有被插入的 index.html

把檔案丟到瀏覽器看看吧！

--

但這樣開發流程還是有點不便，明天來研究怎麼加速這樣子的開發流程吧！

今日程式碼

明天待續